<template>
	<div class="page-container">
		<!-- 标题 -->
		<h1 class="main-title">食物相克查询</h1>

		<!-- 输入框组 -->
		<div class="module">
			<div class="input-group">
				<input type="text" v-model="food" @confirm="queryFoodClash" />
				<button class="query-button" @click="queryFoodClash">查询</button>
			</div>
		</div>

		<!-- 结果展示区域 -->
		<div class="result-area module">
			<scroll-view scroll-y class="result-scroll">
				<div v-if="loading" class="loading">正在查询...</div>
				<div v-else-if="resultMessage" class="result-message">
					<div class="result-title">{{ resultMessage.title }}</div>
					<div class="result-content">
						<div v-for="(clash, index) in resultMessage.content" :key="index">
							{{ clash.food1 }}: {{ clash.message }}
						</div>
					</div>
				</div>
				<div v-else class="placeholder">请输入食物名称并点击查询。</div>
			</scroll-view>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 数据
	const food = ref(''); // 用户输入的食物
	const resultMessage = ref(null); // 查询结果
	const loading = ref(false); // 加载状态

	async function callFoodClashApi(food) {
		const apiUrl =
			`https://api.istero.com/resource/food/combinations?token=e274977be077797db24669c942ab975b&food=${encodeURIComponent(food)}`;

		try {
			const response = await uni.request({
				url: apiUrl,
				method: "GET",
			});

			if (response.statusCode === 200 && response.data.code === 200) {
				return response.data.data.lists; // 返回解析后的数据

			} else {
				throw new Error(response.data.msg || "请求失败，请稍后再试");
			}
		} catch (error) {
			console.error("调用食物相克API失败:", error);
			throw new Error("请求失败，请稍后再试");
		}
	}

	/**
	 * 查询食物相克信息
	 */
	async function queryFoodClash() {
		const f = food.value.trim();

		if (!f) {
			alert('请输入食物名称');
			return;
		}

		loading.value = true; // 开始加载

		try {
			const result = await callFoodClashApi(f);
			console.log(result);
			if (result.length > 0) {
				resultMessage.value = {
					title: `${f} 相克的食物：`,
					content: result.map(item => ({
						food1: item.food1,
						message: item.consequence
					}))
				};
			} else {
				resultMessage.value = {
					title: `${f} 没有发现明显的相克食物！`,
					content: ["这种食物可以与其他大多数食物安全搭配食用。"]
				};
			}
		} catch (error) {
			resultMessage.value = {
				title: '查询失败',
				content: [error.message]
			};
		} finally {
			loading.value = false; // 结束加载
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 40px;
		// background: linear-gradient(145deg, #f4f9f4, #dcedc8);
		background-color: #e8f5e9;
		border-radius: 0;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		animation: fadeIn 0.6s ease;

		.main-title {
			font-size: 36px;
			font-weight: bold;
			color: #2ecc71;
			text-align: center;
			margin-bottom: 30px;
			position: relative;

			&::after {
				content: '';
				display: block;
				width: 80px;
				height: 4px;
				background: #2ecc71;
				margin: 10px auto 0;
				border-radius: 2px;
			}
		}

		.module {
			margin-bottom: 30px;
			padding: 25px;
			background-color: #fff;
			border-radius: 15px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			width: 100%;
			max-width: 600px;

			.input-group {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20px;

				input {
					width: 100%;
					height: 30rpx;
					padding: 30rpx;
					background-color: #fff;
					border: 1px solid #ddd;
					border-radius: 8px;
					font-size: 30rpx;
					transition: border-color 0.3s ease, box-shadow 0.3s ease;

					&:focus {
						border-color: #2ecc71;
						outline: none;
						box-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
					}
				}

				.query-button {
					width: 80%;
					padding: 12rpx;
					background: linear-gradient(135deg, #2ecc71, #27ae60);
					color: white;
					font-size: 18px;
					font-weight: bold;
					border: none;
					border-radius: 10px;
					cursor: pointer;
					transition: background 0.3s ease, transform 0.3s ease;
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

					&:hover {
						background: linear-gradient(135deg, #27ae60, #2ecc71);
						transform: scale(1.05);
					}
				}
			}
		}

		.result-area {
			background-color: #fff;
			border-radius: 15px;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
			padding: 20px;
			overflow: hidden;
			width: 100%;
			max-width: 600px;

			.result-scroll {
				height: 300px;
				overflow-y: auto;
			}

			.loading {
				font-size: 18px;
				color: #666;
				text-align: center;
				margin-top: 20px;
			}

			.result-message {
				text-align: center;
				font-size: 20px;
				color: #333;
				line-height: 1.6;

				.result-title {
					font-size: 30px;
					font-weight: bold;
					margin-bottom: 10px;
				}

				.result-content {
					color: #555;
				}
			}

			.placeholder {
				font-size: 18px;
				color: #999;
				text-align: center;
				margin-top: 20px;
			}
		}
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>